<!--
* @author wn
* @date 2022/11/14 11:22:08
* @description: 首页  二级路由  echarts
!-->
<template>
	<!-- 上下左右  四等份  -->
	<el-row :gutter="20">
		<!-- 左侧 -->
		<el-col :span="12">
			<el-card shadow="hover" :body-style="{ padding: '0px 10px 10px' }">
				<template #header>
					<h2>人数统计</h2>
				</template>
				<dv-border-box-1>
					<echarts-one />
				</dv-border-box-1>
			</el-card>
			<el-card shadow="hover" :body-style="{ padding: '0px 10px 10px' }">
				<template #header>
					<h2>每日访客统计</h2>
				</template>
				<border>
					<echarts-two />
				</border>
			</el-card>
		</el-col>
		<!-- 右侧 -->
		<el-col :span="12">
			<el-card shadow="hover" :body-style="{ padding: '0px 10px 10px' }">
				<template #header>
					<h2>报修统计</h2>
				</template>
				<dv-border-box-8>
					<echarts-three />
				</dv-border-box-8>
			</el-card>
			<el-card shadow="hover" :body-style="{ padding: '0px 10px 10px' }">
				<template #header>
					<h2>车位统计</h2>
				</template>
				<echarts-four />
			</el-card>
		</el-col>
	</el-row>
</template>
<script setup>
import EchartsOne from './components/EchartsOne'
import EchartsTwo from './components/EchartsTwo'
import EchartsThree from './components/EchartsThree'
import EchartsFour from './components/EchartsFour'
</script>
<style scoped lang="scss">
.el-card {
	border-radius: 8px;
	background-color: #ccc;
	&:nth-child(odd) {
		margin-bottom: 22px;
	}
	:deep(.el-card__header) {
		border-bottom: none;
		h2 {
			text-align: center;
			margin: 0;
		}
	}
}
</style>
